<template name="myluck">
	<view class="padding-20" style="min-height: 100vh;background-color: #F0E3CE;"
		:style="{background:'url('+Imgbase+'/'+skin+'_goodindex_bgc.png)','background-size':'100%',}">

		<view class="padding-top-65 padding-left-35">
			<image class="w-60 h-60" :src="Imgbase + '/new_goodmy_img2.png'" mode="aspectFit"
				@click="toPage('index','setting')">
			</image>
		</view>

		<view class="w100 h-360 df ">
			<view class="w-170 h-170 margin-top-30 margin-left-40 padding-6" @click="copyname(user.username)"
				:style="{background:'url('+Imgbase+'/new_goodmy_img1.png)','background-size':'100% 100%',}">
				<!-- :style="{background:'url('+user.avatar+')','background-size':'100% 100%',}" -->
				<image class="w100 h100 radiusb-50" style="overflow: hidden;" :src="user.avatar" mode="aspectFill">
				</image>
			</view>
			<view class="w-420 margin-top-30 padding-left-30">
				<view class="font-40 w100 font-weight-500 one-line" style="color: #A15B25;">
					{{username}}
				</view>
				<view class="font-22 padding-top-15" style="color: #A15B25;">
					LV{{level}}({{levelnow}}/{{levelall}})
				</view>

				<view class="w100 h-32 padding-5 margin-top-15" @click="toPage('index','level')"
					style="position: relative;">

					<view class="w100 h-25 schedule" style="background-color: #FFD08F;">
						<view class="h100" style="background-color: #FF2D2D;" :style="[{ width:loading?levelpoint:0}]">
						</view>
					</view>

					<view class="w100 h100" style="position: absolute;z-index: 9999;top: 0;left: 0;"
						:style="{background:'url('+Imgbase+'/new_goodmy_img3.png)','background-size':'100% 100%',}">
					</view>
				</view>

			</view>
		</view>

		<view class="w100 h-1300 padding-top-135" style="margin-top: -280rpx;"
			:style="{background:'url('+Imgbase+'/new_goodmy_bgc1.png)','background-size':'100% 100%',}">
			<view class="padding-top-45 padding-bottom-10 padding-left-35 font-22" style="color: #A15B25;">
				我的资产
			</view>
			<view class="flex-between  padding-left-130 padding-right-130">
				<view class="w-130 h-140 radius-20 fff text-center " v-for="(item,index) in myinfor" :key="index"
					@click="gopage(index)" style="background-color: #FF9B4E;border: 4rpx solid #A15B25;">
					<view class="padding-top-20">
						{{item.price}}
					</view>
					<view class="padding-top-20 font-26">
						{{item.text}}
					</view>
				</view>
			</view>

			<view class="padding-top-120 padding-left-40 ">
				<view class="w100 text-center padding-right-40">
					<image class="w-600 h-130" :src="Imgbase + '/new_goodmy_img4.png'" mode="aspectFit"
						@click="golaxin()">
				</view>

				<view class="padding-right-40">
					<view class="font-22 padding-top-25" style="color: #A15B25;">
						我的订单
					</view>
					<view class="flex-between padding-20">
						<!-- <view class="" @click="goorder(0)">
							<image class="w-150 h-150" :src="Imgbase + '/new_goodmy_img5.png'" mode="aspectFit">
							</image>
						</view> -->
						<view class="">
							<image class="w-150 h-150" @click="goorder(1)" :src="Imgbase + '/new_goodmy_img6.png'"
								mode="aspectFit">
							</image>
						</view>
						<view class="">
							<image class="w-150 h-150" @click="goorder(2)" :src="Imgbase + '/new_goodmy_img7.png'"
								mode="aspectFit">
							</image>
						</view>
						<view class="w-150 h-150">

						</view>
					</view>
				</view>

				<view class="">
					<view class="font-22 padding-top-15 padding-bottom-15" style="color: #A15B25;">
						我的功能
					</view>
					<view class="btnitem margin-bottom-15">
						<image class="w100 h-80" :src="Imgbase + '/new_goodmy_img15.png'" mode="aspectFit"
							@click="toPage('goodspoor','scoreshop')">
						</image>
					</view>
					<view class="btnitem margin-bottom-15">
						<image class="w100 h-80" :src="Imgbase + '/new_goodmy_img11.png'" mode="aspectFit"
							@click="gocdk">
						</image>
					</view>
					<view class="btnitem margin-bottom-15">
						<image class="w100 h-80" :src="Imgbase + '/new_goodmy_img13.png'" mode="aspectFit"
							@click="toPage('goodspoor','water',0)">
						</image>
					</view>
					<view class="btnitem margin-bottom-15">
						<image class="w100 h-80" :src="Imgbase + '/new_goodmy_img10.png'" mode="aspectFit"
							@click="toPage('goodspoor','usersave')">
						</image>
					</view>
					<view class="btnitem margin-bottom-15">
						<image class="w100 h-80" :src="Imgbase + '/new_goodmy_img12.png'" mode="aspectFit"
							@click="toPage('goodspoor','ouwater')">
						</image>
					</view>
					<view class="btnitem margin-bottom-15">
						<image @click="gopage(2)" class="w100 h-80" :src="Imgbase + '/new_goodmy_img9.png'"
							mode="aspectFit">
						</image>
					</view>
					<view class="btnitem margin-bottom-15">
						<button open-type="contact"
							style="display: flex;justify-content: center;overflow: hidden;background-color:transparent;padding: 0;">
							<image class="w100 h-80" :src="Imgbase + '/new_goodmy_img14.png'" mode="aspectFit">
							</image>
						</button>
					</view>
					<view class="btnitem margin-bottom-15">
						<image class="w100 h-80" :src="Imgbase + '/new_goodmy_img8.png'" mode="aspectFit"
							@click="toPage('goodspoor','water',1)">
						</image>
					</view>

				</view>
			</view>

		</view>
		<view style="position: fixed;right: 1%;bottom: 20%;">
			<image class="w-90 h-90" :style="{'transform': 'rotate('+360*refreshtime+'deg)','transition': 'all 1s'}"
				@click="startR" :src="Imgbase+'/'+skin+'_goodpoor_img6.png'" mode="aspectFit"></image>
		</view>


		<view class="h-200">

		</view>
		
		<!-- 夏季皮肤 -->
		<view class=" padding-bottom-25 w100 h-160 tabbars " v-if="skin == 'summer'">
			<view class="flex-between h-120" style="position: relative;z-index: 9999;">
				<view class="" @click="seletab(1)">
					<view class="w-130 h-130 text-center">
						<image :src=" Imgbase+'/summer_goodtab1.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(2)">
					<view class="w-140 h-130 text-center">
						<image :src=" Imgbase+'/summer_goodtab2.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(3)">
					<view class="w-130 h-130 text-center ">
						<image :src=" Imgbase+'/summer_goodtab3.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(4)">
					<view class="w-140 h-140 text-center">
						<image :src=" Imgbase+'/summer_goodtab4.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="padding-top-10" @click="seletab(5)">
					<view class="w-130 h-130 text-center">
						<image :src=" Imgbase+'/summer_goodtab5.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
			</view>
			<view class="bgcsqing w100 h-110"
				:style="{background:'url('+Imgbase+'/summer_goodbgc.png)','background-size':'100% 100%',}">
		
			</view>
		</view>

		<!-- 经典皮肤 -->
		<view class="w100 h-160 tabbars " v-if="skin == 'classics'">
			<view class="flex-between h-140" style="position: relative;z-index: 9999;">
				<view class="" @click="seletab(1)">
					<view class="w-120 h-120 text-center">
						<image :src=" Imgbase+'/new_good_tab1.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(2)">
					<view class="w-120 h-120 text-center">
						<image :src=" Imgbase+'/new_good_tab2.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(3)">
					<view class="w-120 h-140 text-center padding-bottom-10">
						<image :src=" Imgbase+'/new_good_tab3.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(4)">
					<view class="w-120 h-120 text-center">
						<image :src=" Imgbase+'/new_good_tab4.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="padding-bottom-10" @click="seletab(5)">
					<view class="w-120 h-120 text-center">
						<image :src=" Imgbase+'/new_good_tab5.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
			</view>
			<view class="bgcs">

			</view>
			<view class="bgcs_top">

			</view>
		</view>

		<!-- 冬季皮肤 -->
		<view class="w100 h-160 tabbars " v-if="skin == 'winter'">
			<view class="flex-between h-140" style="position: relative;z-index: 9999;">
				<view class="padding-bottom-50" @click="seletab(1)">
					<view class="w-130 h-150 text-center ">
						<image :src=" Imgbase+'/winter_goodtab1.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="padding-bottom-15" @click="seletab(2)">
					<view class="w-120 h-120 text-center">
						<image :src=" Imgbase+'/winter_goodtab2.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="padding-bottom-20" @click="seletab(3)">
					<view class="w-125 h-125 text-center">
						<image :src=" Imgbase+'/winter_goodtab3.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(4)">
					<view class="w-115 h-115 text-center">
						<image :src=" Imgbase+'/winter_goodtab4.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="padding-bottom-15" @click="seletab(5)">
					<view class="w-120 h-120 text-center">
						<image :src=" Imgbase+'/winter_goodtab5.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
			</view>
			<view class="bgcswinter">

			</view>
			<view class="bgcs_topwinter">

			</view>
		</view>

		<!-- 新年皮肤 -->
		<view class="w100 h-160 tabbars " v-if="skin == 'newyear'">
			<view class="flex-between h-120" style="position: relative;z-index: 9999;">
				<view class="" @click="seletab(1)">
					<view class="w-120 h-120 text-center">
						<image :src=" Imgbase+'/newyear_goodtab1.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(2)">
					<view class="w-120 h-120 text-center">
						<image :src=" Imgbase+'/newyear_goodtab2.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(3)">
					<view class="w-120 h-120 text-center ">
						<image :src=" Imgbase+'/newyear_goodtab3.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(4)">
					<view class="w-120 h-120 text-center">
						<image :src=" Imgbase+'/newyear_goodtab4.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="padding-bottom-10" @click="seletab(5)">
					<view class="w-120 h-120 text-center">
						<image :src=" Imgbase+'/newyear_goodtab5.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
			</view>
			<view class="bgcsnewyear w100 h-200"
				:style="{background:'url('+Imgbase+'/newyear_goodbgc.png)','background-size':'100% 100%',}">

			</view>
		</view>

		<!-- 春季皮肤 -->
		<view class=" padding-bottom-25 w100 h-160 tabbars " v-if="skin == 'qing'">
			<view class="flex-between h-120" style="position: relative;z-index: 9999;">
				<view class="" @click="seletab(1)">
					<view class="w-130 h-130 text-center">
						<image :src=" Imgbase+'/qing_goodtab1.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(2)">
					<view class="w-130 h-130 text-center">
						<image :src=" Imgbase+'/qing_goodtab2.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(3)">
					<view class="w-130 h-130 text-center ">
						<image :src=" Imgbase+'/qing_goodtab3.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(4)">
					<view class="w-130 h-130 text-center">
						<image :src=" Imgbase+'/qing_goodtab4.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="padding-top-10" @click="seletab(5)">
					<view class="w-130 h-130 text-center">
						<image :src=" Imgbase+'/qing_goodtab5.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
			</view>
			<view class="bgcsqing w100 h-110"
				:style="{background:'url('+Imgbase+'/qing_goodbgc.png)','background-size':'100% 100%',}">

			</view>
		</view>

		<view class="cu-modal" :class="modalName=='changeNickname'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">修改昵称</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="cu-form-group margin-top">
						<view class="title">新昵称</view>
						<input placeholder="请输入新昵称" name="input" v-model="newname"></input>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-blue text-blue" @tap="hideModal">取消</button>
						<button class="cu-btn bg-blue margin-left" @tap="sureNickname()">确定</button>
					</view>
				</view>
			</view>
		</view>

		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
	import md5 from '@/utils/md5.js'
	export default {
		name: "myluck",
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				PageCur: 5,
				user: [],
				levelpoint: '60%',
				levelnow: 0,
				levelall: 0,
				loading: true,
				modalName: null,
				newname: '',
				level: 1,
				refreshtime: 0,
				userid: 0,
				username: '',
				myinfor: [{
						text: 'GOOD豆',
						price: ''
					},
					// {
					// 	text: '余额',
					// 	price: ''
					// },
					{
						text: '积分',
						price: ''
					},
					{
						text: '红豆',
						price: ''
					}
				],
				skin: 'classics'
			};
		},
		onShareAppMessage(res) {
			let _this = this;
			return {
				// title: _this.desc.name,
				path: '/pages/index/kpindex',
				imageUrl: 'https://oqyf-1305090490.cos.ap-shanghai.myqcloud.com/front/1zhan_new_logo.png',
			}
		},
		onReady() {

		},
		onLoad(e) {
			let _this = this
			if (e.id) {
				this.userFront()
				setTimeout(function() {
					_this.apppay(e.id, e.money)
					// _this.apppay(1, 1000)
				}, 300)
			}
			// this.$refs.uToast.show({
			// 	type: 'loading',
			// 	title: '正在加载',
			// 	message: "正在加载",
			// 	iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png'
			// })
		},
		onLaunch() {},
		onShow() {
			if (uni.getStorageSync('skin')) {
				this.skin = uni.getStorageSync('skin')
			}

			if (uni.getStorageSync('token') == '') {
				this.$uniApi.trylogin();
			}
			this.userFront()
		},
		methods: {
			gopage(i) {
				switch (i) {
					case 0: //good豆
						uni.navigateTo({
							url: '/pages/goodspoor/ouwater'
						})
						break;
					case 1: // 积分
						uni.navigateTo({
							url: '/pages/goodspoor/water?id=' + 1
						})
						break;
					case 2: // 红豆
						uni.navigateTo({
							url: '/pagesA/advanced/hdwater'
						})
						break;
					case 3: // 优惠券
						uni.navigateTo({
							url: '/pagesA/newpage/coupon'
						})
						break;
				}
			},
			golaxin() {
				// uni.showToast({
				// 	icon: 'none',
				// 	title: '此功能正在开发中'
				// });
				// return

				uni.navigateTo({
					url: '/pagesA/newpage/laxin'
				})
			},
			goorder(e) {
				uni.navigateTo({
					url: '/pagesA/newpage/myorder?id=' + e
				})
			},
			apppay(id, money) {
				let _this = this
				console.log(123123123)
				if (id == _this.user.id) {
					let str = _this.$uniApi.mdnum();
					var md5Str = md5.hex_md5(str[1])
					uni.request({
						url: _this.$globals.apibase + '/api/Luckorder/invest',
						data: {
							token: uni.getStorageSync('token'),
							money: money,
							ver: _this.$mpVer,
							platform: _this.id == 0 ? '' : 'app',
							nonce: str[2],
							sign: md5Str,
							timestamp: str[0]
						},
						method: 'POST',
						header: {
							'content-type': 'application/json'
						},
						success: (res) => {

							if (res.data.code == '401') {
								uni.setStorageSync('token', '');
								_this.$uniApi.trylogin();
							}
							if (res.data.code == '1') {
								if (res.data.data.state == 1) {
									uni.showToast({
										icon: 'none',
										title: '充值成功',
										duration: 5000
									});
								} else if (res.data.data.state == 0) {
									uni.requestPayment({
										timeStamp: res.data.data.result.timeStamp,
										nonceStr: res.data.data.result.nonceStr,
										package: res.data.data.result.package,
										signType: res.data.data.result.signType,
										paySign: res.data.data.result.paySign,
										success: function(result) {
											uni.showToast({
												icon: 'success',
												title: '充值成功',
												duration: 5000,
											});
										}
									})
								} else {
									uni.showToast({
										icon: 'none',
										title: '未知错误'
									});
								}
							}
							if (res.data.code == '0') {
								uni.showToast({
									icon: 'none',
									title: res.data.msg
								});
							}
						}
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '帐号不一致'
					});
				}
			},
			copyname(e) {
				uni.setClipboardData({
					data: e,
					showToast: false,
					success: function() {
						uni.showToast({
							title: '复制成功'
						});
					}
				})
			},
			gocdk() {
				uni.navigateTo({
					url: '/pagesA/advanced/exchange'
				})
			},
			startR() {
				console.log(123123123)
				if (getApp().globalData.couldFresh == true) {
					getApp().globalData.couldFresh = false;
					setTimeout(() => {
						getApp().globalData.couldFresh = true;
					}, 1000)
				} else {
					return;
				}
				this.refreshtime += 1;
				this.userFront()
			},
			hideModal(e) {
				this.modalName = null
				this.newname = ''
			},
			// 修改昵称
			sureNickname() {
				let _this = this;
				if (this.newname == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入新昵称!'
					});
					return;
				}
				if (this.newname.length >= 10) {
					uni.showToast({
						icon: 'none',
						title: '新昵称长度不能超过10个字符哟!'
					});
					return;
				}
				if (this.newname.search('死') != -1 ||
					this.newname.search('全家') != -1 ||
					this.newname.search('爸') != -1 ||
					this.newname.search('妈') != -1 ||
					this.newname.search('草') != -1 ||
					this.newname.search('爹') != -1 ||
					this.newname.search('母') != -1 ||
					this.newname.search('艹') != -1 ||
					this.newname.search('户口本') != -1) {
					uni.showToast({
						icon: 'none',
						title: '新昵称中有不文明用语哟!'
					});
					return;
				}
				if (this.newname.search('ㅤ') != -1 ||
					this.newname.search(' ') != -1) {
					uni.showToast({
						icon: 'none',
						title: '新昵称中有不可使用的符号哟!'
					});
					return;
				}
				uni.request({
					url: _this.$globals.apibase + '/api/Usersys/changeNickname',
					data: {
						token: uni.getStorageSync('token'),
						nickname: _this.newname,
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == '401') {
							uni.setStorageSync('token', '');
							_this.$uniApi.trylogin();
						}
						if (res.data.code == '1') {
							uni.showToast({
								icon: 'none',
								title: '昵称修改成功!',
								duration: 5000,
							});
							_this.modalName = null
							_this.newname = ''
							_this.userFront()
						}
						if (res.data.code == '0') {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					}
				});
			},
			// 修改昵称
			changenickname() {
				this.modalName = 'changeNickname';
			},
			async userFront(e) {
				let _this = this
				let item = await this.$api.post('Userways/userFront', {
					token: uni.getStorageSync('token'),
				})

				if (item.code == 401) {
					uni.navigateTo({
						url: `/pages/login/login`
					})
				}

				_this.user = item.data.user_desc
				_this.username = item.data.user_desc.nickname
				_this.myinfor[0].price = item.data.user_desc.coupon
				// _this.myinfor[1].price = item.data.user_desc.money
				_this.myinfor[1].price = item.data.user_desc.score
				_this.myinfor[2].price = item.data.user_desc.loss

				_this.userid = item.data.user_desc.id
				_this.levelall = item.data.level_mes.endpoint;
				_this.levelnow = item.data.user_desc.empirical;
				_this.level = item.data.level_mes.level;
				_this.levelpoint = Number(_this.levelnow / _this.levelall * 100).toFixed(1) + '%'
			},
			toPage(folder, name, id = -1) {
				if (id == -1) {
					uni.navigateTo({
						url: `/pages/${folder}/${name}`
					});
				} else {
					uni.navigateTo({
						url: `/pages/${folder}/${name}?id=${id}`
					});
				}
			},
			seletab(i) {
				this.PageCur = i
				switch (i) {
					case 1:
						uni.switchTab({
							url: '/pages/goodspoor/index'
						})
						break;
					case 2:
						uni.switchTab({
							url: '/pages/goodspoor/backpack'
						})
						break;
					case 3:
						uni.switchTab({
							url: '/pages/index/kpindex'
						})
						break;
					case 4:
						uni.switchTab({
							url: '/pages/goodspoor/socity'
						})
						break;
					case 5:
						uni.switchTab({
							url: '/pages/goodspoor/user'
						})
						break;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btnitem {
		width: 48%;
		float: left;
		margin-right: 4%;
	}

	.btnitem:nth-child(2n) {
		margin-right: 0;
	}

	.schedule {
		border-radius: 15rpx;
		overflow: hidden;
	}

	.poke_item {
		position: relative;

		.item_img {
			position: absolute;
			z-index: 0;
		}

		.item_num {
			position: absolute;
			z-index: 9;
			top: 20rpx;
			left: 40rpx;
		}
	}

	.auto {
		margin: 0 auto;
	}

	button:after {
		border: none;
	}
</style>